<template>
    <div class="dashboard">
        <div class="page-header">
            <h1>数据概览</h1>
            <p>实时监控平台运营数据</p>
        </div>

        <!-- 统计卡片 -->
        <a-row :gutter="16" class="stats-cards">
            <a-col :span="6">
                <a-card>
                    <a-statistic title="总用户数" :value="statistics.totalUsers" :value-style="{ color: '#3f8600' }">
                        <template #prefix>
                            <UserOutlined />
                        </template>
                    </a-statistic>
                    <div class="stat-change">
                        <span class="change-value positive">+12%</span>
                        <span class="change-text">较上月</span>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="6">
                <a-card>
                    <a-statistic title="总课程数" :value="statistics.totalCourses" :value-style="{ color: '#1890ff' }">
                        <template #prefix>
                            <BookOutlined />
                        </template>
                    </a-statistic>
                    <div class="stat-change">
                        <span class="change-value positive">+5%</span>
                        <span class="change-text">较上月</span>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="6">
                <a-card>
                    <a-statistic title="今日收入" :value="statistics.todayRevenue" :value-style="{ color: '#cf1322' }"
                        prefix="¥">
                        <template #prefix>
                            <DollarOutlined />
                        </template>
                    </a-statistic>
                    <div class="stat-change">
                        <span class="change-value positive">+8%</span>
                        <span class="change-text">较昨日</span>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="6">
                <a-card>
                    <a-statistic title="活跃用户" :value="statistics.activeUsers" :value-style="{ color: '#722ed1' }">
                        <template #prefix>
                            <TeamOutlined />
                        </template>
                    </a-statistic>
                    <div class="stat-change">
                        <span class="change-value positive">+15%</span>
                        <span class="change-text">较昨日</span>
                    </div>
                </a-card>
            </a-col>
        </a-row>

        <!-- 图表区域 -->
        <a-row :gutter="16" class="charts-section">
            <a-col :span="12">
                <a-card title="用户增长趋势" class="chart-card">
                    <div class="chart-container">
                        <v-chart :option="userGrowthOption" :autoresize="true" style="width: 100%; height: 100%;" />
                    </div>
                </a-card>
            </a-col>
            <a-col :span="12">
                <a-card title="收入统计" class="chart-card">
                    <div class="chart-container">
                        <v-chart :option="revenueOption" :autoresize="true" style="width: 100%; height: 100%;" />
                    </div>
                </a-card>
            </a-col>
        </a-row>

        <!-- 排行榜 -->
        <a-row :gutter="16" class="ranking-section">
            <a-col :span="8">
                <a-card title="热门课程排行" class="ranking-card">
                    <a-list>
                        <a-list-item v-for="(course, index) in topCourses" :key="course.id">
                            <a-list-item-meta>
                                <template #avatar>
                                    <a-avatar :style="{ backgroundColor: getRankColor(index) }">
                                        {{ index + 1 }}
                                    </a-avatar>
                                </template>
                                <template #title>
                                    <a href="#">{{ course.title }}</a>
                                </template>
                                <template #description>
                                    {{ course.students }}人学习
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </a-list>
                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card title="优秀学员排行" class="ranking-card">
                    <a-list>
                        <a-list-item v-for="(student, index) in topStudents" :key="student.id">
                            <a-list-item-meta>
                                <template #avatar>
                                    <a-avatar :src="student.avatar" />
                                </template>
                                <template #title>
                                    <a href="#">{{ student.name }}</a>
                                </template>
                                <template #description>
                                    学习时长: {{ student.studyTime }}小时
                                </template>
                            </a-list-item-meta>
                            <div class="rank-score">{{ student.score }}分</div>
                        </a-list-item>
                    </a-list>
                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card title="最近订单" class="ranking-card">
                    <a-list>
                        <a-list-item v-for="order in recentOrders" :key="order.id">
                            <a-list-item-meta>
                                <template #avatar>
                                    <a-avatar icon="shopping" />
                                </template>
                                <template #title>
                                    <a href="#">{{ order.courseName }}</a>
                                </template>
                                <template #description>
                                    {{ order.userName }} - {{ order.time }}
                                </template>
                            </a-list-item-meta>
                            <div class="order-amount">¥{{ order.amount }}</div>
                        </a-list-item>
                    </a-list>
                </a-card>
            </a-col>
        </a-row>

        <!-- 学习进度分布 -->
        <a-row :gutter="16" class="progress-section">
            <a-col :span="12">
                <a-card title="学员学习进度分布" class="progress-card">
                    <div class="progress-stats">
                        <div class="progress-item">
                            <span class="progress-label">已完成课程</span>
                            <a-progress :percent="progressStats.completed" status="success" />
                        </div>
                        <div class="progress-item">
                            <span class="progress-label">学习中</span>
                            <a-progress :percent="progressStats.learning" />
                        </div>
                        <div class="progress-item">
                            <span class="progress-label">未开始</span>
                            <a-progress :percent="progressStats.notStarted" status="exception" />
                        </div>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="12">
                <a-card title="作业完成情况" class="progress-card">
                    <div class="assignment-stats">
                        <a-row :gutter="16">
                            <a-col :span="8">
                                <div class="stat-box">
                                    <div class="stat-number">{{ assignmentStats.total }}</div>
                                    <div class="stat-label">总作业数</div>
                                </div>
                            </a-col>
                            <a-col :span="8">
                                <div class="stat-box">
                                    <div class="stat-number">{{ assignmentStats.completed }}</div>
                                    <div class="stat-label">已完成</div>
                                </div>
                            </a-col>
                            <a-col :span="8">
                                <div class="stat-box">
                                    <div class="stat-number">{{ assignmentStats.pending }}</div>
                                    <div class="stat-label">待完成</div>
                                </div>
                            </a-col>
                        </a-row>
                        <div class="completion-rate">
                            完成率: {{ Math.round((assignmentStats.completed / assignmentStats.total) * 100) }}%
                        </div>
                    </div>
                </a-card>
            </a-col>
        </a-row>

        <!-- 系统状态 -->
        <a-row :gutter="16" class="system-section">
            <a-col :span="24">
                <a-card title="系统状态监控" class="system-card">
                    <a-row :gutter="16">
                        <a-col :span="6">
                            <div class="system-item">
                                <div class="system-icon">
                                    <DesktopOutlined style="color: #52c41a;" />
                                </div>
                                <div class="system-info">
                                    <div class="system-name">服务器状态</div>
                                    <div class="system-status online">正常运行</div>
                                </div>
                            </div>
                        </a-col>
                        <a-col :span="6">
                            <div class="system-item">
                                <div class="system-icon">
                                    <DatabaseOutlined style="color: #1890ff;" />
                                </div>
                                <div class="system-info">
                                    <div class="system-name">数据库</div>
                                    <div class="system-status online">正常</div>
                                </div>
                            </div>
                        </a-col>
                        <a-col :span="6">
                            <div class="system-item">
                                <div class="system-icon">
                                    <CloudOutlined style="color: #722ed1;" />
                                </div>
                                <div class="system-info">
                                    <div class="system-name">CDN</div>
                                    <div class="system-status online">正常</div>
                                </div>
                            </div>
                        </a-col>
                        <a-col :span="6">
                            <div class="system-item">
                                <div class="system-icon">
                                    <RobotOutlined style="color: #faad14;" />
                                </div>
                                <div class="system-info">
                                    <div class="system-name">AI服务</div>
                                    <div class="system-status online">正常</div>
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, PieChart } from 'echarts/charts'
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
    DataZoomComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import {
    UserOutlined,
    BookOutlined,
    DollarOutlined,
    TeamOutlined,
    DesktopOutlined,
    DatabaseOutlined,
    CloudOutlined,
    RobotOutlined
} from '@ant-design/icons-vue'

// 注册ECharts组件
use([
    CanvasRenderer,
    LineChart,
    BarChart,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
    DataZoomComponent
])

// 统计数据
const statistics = reactive({
    totalUsers: 12580,
    totalCourses: 156,
    todayRevenue: 25800,
    activeUsers: 3420
})

// 热门课程排行
const topCourses = reactive([
    { id: 1, title: 'AI智能体开发实战', students: 1234 },
    { id: 2, title: 'Vue3实战开发', students: 987 },
    { id: 3, title: 'SpringBoot微服务', students: 756 },
    { id: 4, title: 'React18新特性', students: 654 },
])

// 优秀学员排行
const topStudents = reactive([
    { id: 1, name: '张三', avatar: 'https://via.placeholder.com/40x40', studyTime: 120, score: 98 },
    { id: 2, name: '李四', avatar: 'https://via.placeholder.com/40x40', studyTime: 108, score: 95 },
    { id: 3, name: '王五', avatar: 'https://via.placeholder.com/40x40', studyTime: 96, score: 92 },
    { id: 4, name: '赵六', avatar: 'https://via.placeholder.com/40x40', studyTime: 84, score: 89 },
])

// 最近订单
const recentOrders = reactive([
    { id: 1, courseName: 'AI智能体开发实战', userName: '张三', time: '10分钟前', amount: 999 },
    { id: 2, courseName: 'Vue3实战开发', userName: '李四', time: '30分钟前', amount: 399 },
    { id: 3, courseName: 'SpringBoot微服务', userName: '王五', time: '1小时前', amount: 599 },
    { id: 4, courseName: 'React18新特性', userName: '赵六', time: '2小时前', amount: 299 },
])

// 学习进度统计
const progressStats = reactive({
    completed: 35,
    learning: 45,
    notStarted: 20
})

// 作业统计
const assignmentStats = reactive({
    total: 1250,
    completed: 980,
    pending: 270
})

// 用户增长数据
const userGrowthData = reactive({
    dates: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    newUsers: [120, 180, 250, 320, 450, 580, 720, 890, 1050, 1250, 1420, 1580],
    activeUsers: [800, 950, 1200, 1450, 1680, 1920, 2150, 2380, 2600, 2820, 3050, 3250]
})

// 收入数据
const revenueData = reactive({
    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    revenue: [45000, 52000, 68000, 85000, 92000, 108000, 125000, 142000, 158000, 175000, 192000, 210000],
    courseSales: [120, 150, 180, 220, 250, 280, 320, 350, 380, 420, 450, 480]
})

// 用户增长趋势图表配置
const userGrowthOption = computed(() => ({
    title: {
        text: '用户增长趋势',
        left: 'center',
        textStyle: {
            fontSize: 16,
            fontWeight: 'normal',
            color: '#333'
        }
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#e8e8e8',
        borderWidth: 1,
        textStyle: {
            color: '#333'
        },
        formatter: function (params: any) {
            let result = params[0].axisValue + '<br/>'
            params.forEach((param: any) => {
                result += param.marker + param.seriesName + ': ' + param.value + '人<br/>'
            })
            return result
        }
    },
    legend: {
        data: ['新增用户', '活跃用户'],
        bottom: 10,
        textStyle: {
            color: '#666'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '15%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: userGrowthData.dates,
        axisLine: {
            lineStyle: {
                color: '#e8e8e8'
            }
        },
        axisLabel: {
            color: '#666'
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#e8e8e8'
            }
        },
        axisLabel: {
            color: '#666',
            formatter: '{value}人'
        },
        splitLine: {
            lineStyle: {
                color: '#f0f0f0'
            }
        }
    },
    series: [
        {
            name: '新增用户',
            type: 'line',
            smooth: true,
            data: userGrowthData.newUsers,
            itemStyle: {
                color: '#1890ff'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: 'rgba(24, 144, 255, 0.3)' },
                        { offset: 1, color: 'rgba(24, 144, 255, 0.1)' }
                    ]
                }
            },
            lineStyle: {
                width: 3
            }
        },
        {
            name: '活跃用户',
            type: 'line',
            smooth: true,
            data: userGrowthData.activeUsers,
            itemStyle: {
                color: '#52c41a'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: 'rgba(82, 196, 26, 0.3)' },
                        { offset: 1, color: 'rgba(82, 196, 26, 0.1)' }
                    ]
                }
            },
            lineStyle: {
                width: 3
            }
        }
    ]
}))

// 收入统计图表配置
const revenueOption = computed(() => ({
    title: {
        text: '收入统计',
        left: 'center',
        textStyle: {
            fontSize: 16,
            fontWeight: 'normal',
            color: '#333'
        }
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#e8e8e8',
        borderWidth: 1,
        textStyle: {
            color: '#333'
        },
        formatter: function (params: any) {
            let result = params[0].axisValue + '<br/>'
            params.forEach((param: any) => {
                if (param.seriesName === '收入') {
                    result += param.marker + param.seriesName + ': ¥' + param.value.toLocaleString() + '<br/>'
                } else {
                    result += param.marker + param.seriesName + ': ' + param.value + '门<br/>'
                }
            })
            return result
        }
    },
    legend: {
        data: ['收入', '课程销量'],
        bottom: 10,
        textStyle: {
            color: '#666'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '15%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: revenueData.months,
        axisLine: {
            lineStyle: {
                color: '#e8e8e8'
            }
        },
        axisLabel: {
            color: '#666'
        }
    },
    yAxis: [
        {
            type: 'value',
            name: '收入(元)',
            position: 'left',
            axisLine: {
                lineStyle: {
                    color: '#e8e8e8'
                }
            },
            axisLabel: {
                color: '#666',
                formatter: '{value}'
            },
            splitLine: {
                lineStyle: {
                    color: '#f0f0f0'
                }
            }
        },
        {
            type: 'value',
            name: '销量(门)',
            position: 'right',
            axisLine: {
                lineStyle: {
                    color: '#e8e8e8'
                }
            },
            axisLabel: {
                color: '#666',
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        }
    ],
    series: [
        {
            name: '收入',
            type: 'bar',
            data: revenueData.revenue,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#ff4d4f' },
                        { offset: 1, color: '#ff7875' }
                    ]
                },
                borderRadius: [4, 4, 0, 0]
            },
            barWidth: '40%',
            emphasis: {
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#cf1322' },
                            { offset: 1, color: '#ff4d4f' }
                        ]
                    }
                }
            }
        },
        {
            name: '课程销量',
            type: 'line',
            yAxisIndex: 1,
            data: revenueData.courseSales,
            itemStyle: {
                color: '#722ed1'
            },
            lineStyle: {
                width: 3
            },
            symbol: 'circle',
            symbolSize: 8
        }
    ]
}))

// 方法
const getRankColor = (index: number) => {
    const colors = ['#f5222d', '#fa8c16', '#faad14', '#52c41a', '#1890ff']
    return colors[index] || '#d9d9d9'
}
</script>

<style scoped>
.dashboard {
    padding: 0;
}

.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    margin-bottom: 8px;
    color: #333;
}

.page-header p {
    color: #666;
    margin: 0;
}

.stats-cards {
    margin-bottom: 24px;
}

.stat-change {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.change-value {
    font-weight: bold;
}

.change-value.positive {
    color: #52c41a;
}

.change-value.negative {
    color: #f5222d;
}

.change-text {
    font-size: 12px;
    color: #666;
}

.charts-section {
    margin-bottom: 24px;
}

.chart-card {
    height: 400px;
}

.chart-container {
    height: 320px;
    width: 100%;
}

.ranking-section {
    margin-bottom: 24px;
}

.ranking-card {
    height: 400px;
}

.rank-score {
    font-weight: bold;
    color: #1890ff;
}

.order-amount {
    font-weight: bold;
    color: #f5222d;
}

.progress-section {
    margin-bottom: 24px;
}

.progress-card {
    height: 300px;
}

.progress-stats {
    padding: 16px 0;
}

.progress-item {
    margin-bottom: 16px;
}

.progress-label {
    display: block;
    margin-bottom: 8px;
    color: #666;
}

.assignment-stats {
    padding: 16px 0;
}

.stat-box {
    text-align: center;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
}

.stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #1890ff;
    margin-bottom: 4px;
}

.stat-label {
    color: #666;
    font-size: 12px;
}

.completion-rate {
    text-align: center;
    margin-top: 16px;
    font-weight: bold;
    color: #52c41a;
}

.system-section {
    margin-bottom: 24px;
}

.system-card {
    height: 200px;
}

.system-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
}

.system-icon {
    font-size: 24px;
}

.system-info {
    flex: 1;
}

.system-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.system-status {
    font-size: 12px;
}

.system-status.online {
    color: #52c41a;
}

.system-status.offline {
    color: #f5222d;
}
</style>
